import * as THREE from "three";
import * as TWEEN from "three/examples/jsm/libs/tween.module.js";
import * as d3 from 'd3'
import {
  CSS2DRenderer,
  CSS2DObject,
} from "three/examples/jsm/renderers/CSS2DRenderer.js";
// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader.js";
// 导入后期效果合成器
import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer";
// three框架本身自带效果
import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass";
import { DotScreenPass } from "three/examples/jsm/postprocessing/DotScreenPass";
import { SMAAPass } from "three/examples/jsm/postprocessing/SMAAPass";
import { SSAARenderPass } from "three/examples/jsm/postprocessing/SSAARenderPass";
import { GlitchPass } from "three/examples/jsm/postprocessing/GlitchPass";
import { UnrealBloomPass } from "three/examples/jsm/postprocessing/UnrealBloomPass";
import { ShaderPass } from "three/examples/jsm/postprocessing/ShaderPass";
import { SSRPass } from "three/examples/jsm/postprocessing/SSRPass.js";
import { GammaCorrectionShader } from "three/examples/jsm/shaders/GammaCorrectionShader.js";
import { ReflectorForSSRPass } from "three/examples/jsm/objects/ReflectorForSSRPass.js";

import gsap from "gsap";



export default class ThreePlus {
  constructor(selector) {
    this.clock = new THREE.Clock();
    this.domElement = document.querySelector(selector);
    this.width = this.domElement.clientWidth;
    this.height = this.domElement.clientHeight;

    // this.lineColor = new THREE.Color(0x7fecff)
    this.init();
  }
  init() {
    this.initScene();  // 初始化场景
    this.initCamera(); // 初始化相机
    this.initRenderer();  // 初始化渲染器
    this.initControl();  // 加入控制器
    this.addAxesHelper() // 加入辅助轴
    this.animate();

    // this.initModole()
    // this.initSceneBg()
  }
  initScene() {
    this.scene = new THREE.Scene();
    this.scene.background = new THREE.Color(0xcccccc);
    // 场景天空盒
    // const textureCubeLoader = new THREE.CubeTextureLoader()
    // const textureCube = textureCubeLoader.load([
    //  '../assets/1.jpg',
    //  '../assets/2.jpg',
    //  '../assets/3.jpg',
    //   // require('../assets/4.jpg'),
    //   // require('../assets/5.jpg'),
    //   // require('../assets/6.jpg'),
    // ]);

    // this.scene.background = textureCube;
    // this.scene.environment = textureCube;
  }
  initCamera() {
    this.camera = new THREE.PerspectiveCamera(
      45,
      window.innerHeight / window.innerHeight,
      0.1,
      100000 // 远平面
    );
    // 设置相机位置
    // camera.position.z = 200;
    // camera.position.y = 2;
    // camera.position.x = 2;
    // camera.lookAt(0, 0, 0);
    // object3d具有position，属性是1个3维的向量
    this.camera.position.set(2, 2, 200)
    this.camera.lookAt(0, 0, 0);
    // 下面这两个一般用于window.addEventListener("resize")内，在这里初始化了一次
    // 重置相机宽高比
    this.camera.aspect = this.width / this.height;
    // 更新摄像机的投影矩阵
    this.camera.updateProjectionMatrix();
  }
  initRenderer() {
    this.renderer = new THREE.WebGLRenderer({
      logarithmicDepthBuffer: true,  // 抗闪烁，如果无效，就调整模型高度吧
      antialias: true, // 开启模型渲染抗锯齿，可关
      alpha: true // 背景透明
    });
    this.renderer.setSize(this.width, this.height); // 设置渲染器大小
    this.renderer.shadowMap.enabled = true;  // 设置渲染器允许投射阴影

    this.renderer.outputEncoding = THREE.sRGBEncoding;// 设置编码格式（可以尝试加入试试），可关
    this.renderer.physicallyCorrectLights = true; //远古版本 让阴影更真实，但会更黑，需要加大曝光度，被移除的aoi
    this.renderer.toneMapping = THREE.ACESFilmicToneMapping; // 设置色调映射 明暗设置，可关
    this.renderer.toneMappingExposure = 2;// 设置色调映射曝光度  环境亮度，控制黑天白天，可关
    this.renderer.sortObjects = true;//  定义渲染器是否应对对象进行排序。默认是true.
    this.domElement.appendChild(this.renderer.domElement);
  }
  initControl() {
    this.control = new OrbitControls(this.camera, this.renderer.domElement);
    // 设置控制器阻尼
    this.control.enableDamping = true;

    this.control.dampingFactor = 0.05;
    // this.control.minPolarAngle = - Math.PI / 4;
    // this.control.maxPolarAngle = Math.PI / 2;
  }
  animate() {
    this.renderer.render(this.scene, this.camera);

    this.control.update();
    // this.effectComposer.render(); // 用后期合成渲染



    TWEEN.update()

    // requestAnimationFrame(this.render());

  }
  addAxesHelper() {
    // 加入辅助轴，帮助我们查看3维坐标轴
    const axesHelper = new THREE.AxesHelper(3)
    this.scene.add(axesHelper)
  }



  initModole() {
    // // 实例化加载器gltf
    const gltfLoader = new GLTFLoader();
    // 加载模型
    gltfLoader.load(
      // 模型路径
      "./model/ImageToStl.glb",
      // 加载完成回调
      (gltf) => {
        gltf.scene.rotation.x = Math.PI / 4;
        gltf.scene.rotation.y = Math.PI / 2;
        this.scene.add(gltf.scene);
      }
    );
  }

}
